<template>
	<view>
		<view v-for="(v,k) in questionList" key="k" :ref="(ref)=>(Qrefs[k]=ref)" class="Qrefs">
			<view class="title" v-if="v.type != 5">
				{{k+1}}. {{v.question}}
			</view>
			<br>
			<!-- <image v-elementScale="scaleFlag" :src="`${BASE_URL}${v.question_img}`" mode="" @click="scaleFlag += 1"></image> -->
			<image :src="`${BASE_URL}${v.question_img}`" mode="" @click="scaleFlag += 1"></image>
			<iceChoice v-if="v.type < 3" :option="v" :k="k" @answer="answer" />
			<iceDetermine v-if="v.type == 3" :option="v" :k="k" @answer="answer" />
			<iceSubjectivity v-if="v.type == 4" :option="v" :k="k" @answer="answer" />
			<iceFill v-if="v.type == 5" :option="v" :k="k" :title="v.question" :index="k+1" @answer="answer" />
		</view>
		<iceMessage :msgParams="msgParams.value" @iceClose="msgParams.isOpen=false" />
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	import {
		postStartExam
	} from '../../../src/api';
	import {
		BASE_URL
	} from '../../../src/api/config';
	import {
		iceGetStorage, iceSetStorage
	} from '../../../utils/common';
	import iceImage from '@/components/widget/iceImage/index.vue'
	import iceChoice from '@/components/cpn/iceQuestion/child/iceChoice.vue'
	import iceDetermine from '@/components/cpn/iceQuestion/child/iceDetermine.vue'
	import iceSubjectivity from '@/components/cpn/iceQuestion/child/iceSubjectivity.vue'
	import iceFill from '@/components/cpn/iceQuestion/child/iceFill.vue'
	
	import { setGetAllData } from '@/src/utils/icePinia';
	const submitData = setGetAllData().submitData
	
	// 答题的结果赋值给全局变量
	const answer = (e)=>{
		const {index,question_id,type,score,answer} = e
		submitData.question_detail[index] = {'question_id':question_id,'type':type,'score':score,'answer':answer}
	}
	const emits = defineEmits(['questionInfo'])
	const props = defineProps({
		changeQ: {
			type: Number,
			default: 0,
		}
	})
	const scaleFlag = ref(0)
	const msgParams = reactive({
		value: {
			msgType: '',
			messageText: '',
			isOpen: false
		}
	})
	const Qrefs = ref([])
	const questionList = ref([])
	const postStartExams = async () => {
		const id = await iceGetStorage('id')
		const uid = await iceGetStorage('userId')
		postStartExam({
			id,
			uid
		}).then(res => {
			if(res.code == 2){
				console.log(res.msg);
				msgParams.value= {
					msgType: 'e',
					messageText: res.msg,
					isOpen: true
				}
				const sto = setTimeout(()=>{
					uni.navigateBack()
				},1500)
				return
			}
			iceSetStorage('iceCheckCheat', true)
			const data = res.data.exam_question
			questionList.value = data.questions
			submitData.uid = uid
			submitData.exam_id = data.id
			submitData.question_detail = []
			submitData.exam_result_id = res.data.exam_result_id
			questionList.value.forEach(v=>{
				const data = {'question_id':v.id,'type':v.type,'score':v.score,'answer':''}
				submitData.question_detail.push(data)
			})
			
			// 除了答题（中间的部分），传给页眉和页脚当前题的信息
			questionInfo()
		})
	}
	postStartExams()
	
	const currentQuestionIndex = ref(0)
	const questionInfo = () => {
		emits('questionInfo', [currentQuestionIndex.value, questionList.value.length, questionList.value[
			currentQuestionIndex.value].type, questionList.value])
	}
	watch(
		() => props.changeQ,
		(n) => {
			const numDom = document.getElementsByClassName('Qrefs')
			numDom[n].scrollIntoView({
				behavior: 'smooth'
			});
			currentQuestionIndex.value = n
			questionInfo()
		},
		// {immediate:true,deep:true,}
	)
</script>
<style lang="scss" scoped>
	.title {
		margin-left: 20px;
	}

	.Qrefs {
		height: 60vh;
		position: relative;
		.images{
			width: 50px;
			position: absolute;
			top:90px;
			right:14px;
			.item{
				width: 50px;
				height: 50px;
				margin-top: 10px;
				border:1px red solid;
			}
		}

		image {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 30px;
			top: 26px;
			transition: 0.2s;
		}
		.scale{
			position: flex;
			left: 0;
			top: 0;
			width: 100vmin;
			height: 100vmin;
			z-index: 1;
		}
	}
</style>